Buttons
Letztes Update:
21. September 2023
Entwurf – Inhalt noch in Arbeit
Symbolbild
Wie hilft dieses Element den Nutzern?
Links und Buttons zählen zu den wichtigsten Interaktionselementen. Sie ermöglichen es den Nutzern rasch und einfach zwischen Informationen zu wechseln oder Interaktionen zu starten.
Icons sind stark vereinfachte Darstellungen eines Objektes oder Vorgangs – als Symbol verwendet haben sie die Funktion eines Buttons bzw. Links.
Wann kommt dieses Element zum Einsatz?
Links und Buttons überlegt setzen! Müssen zur Zielsetzung der Seite passen!
Sie bieten dem Nutzer Möglichkeiten, bedeuten aber auch Aufwand. Nutzer müssen erst überlegen ob die weiteren Informationen interessieren und sind verleitet abzuspringen. Damit ist der Nutzer auf der jeweiligen Seite mit ihrer Zielsetzung verloren und das Nutzererlebnis ist unterbrochen.
UX Konzeption
Größe für Interaktionselemente: Klickbare Elemente jeglicher Art (auch z.B. Radiobuttons oder Checkboxen) müssen – aufgrund der Bedienbarkeit auf mobilen Endgeräten – folgende Mindestgrößen aufweisen:
Seitenmaße der reaktiven Fläche (also des konkret anwählbaren Links) mindestens 48 x 48 Pixel bzw. rund 7 Millimeter
Mindestabstand zum nächsten klickbaren Elemente von mindestens 8 Pixeln bzw. idealerweise rund 5 Millimeter
Ausnahme: Links in Lauftexten welche sich in einem Satz oder Textblock befinden. Das entsprechende Linkziel muss auf derselben Seite auch über einen Link oder Steuerelement erreichbar sein, das mindestens 48 x 48 CSS-Pixel groß ist.
Icons in Buttons sind möglich, diese müssen farblich der Schriftfarbe im Button entsprechen.
Verwendung beispielsweise als Bestätigungsbutton in Formularen oder als Link um Seiten mit weiterführenden Informationen zu erreichen.
Wird ein Button als Link eingesetzt soll dieser auch mit <a> ausgezeichnet sein. Dies macht den Zweck des Buttons klarer. Auch Suchmaschinen werten z.B Texte in Links besser als Texte in Buttons.
Bei inaktiven Buttons wird das Aria-Attribut disabled=“true“ gesetzt
Strukturierte Daten / Schema.org
Auf den Plattformen und in E-Mail Nachrichten wie beispielsweise Newslettern kommen Schemata für strukturierte Daten zum Einsatz. Diese ermöglichen unter anderem Anwendungen von Google, Microsoft, Pinterest etc. mittels dieser Informationen reichhaltigere und für die Nutzer passende Inhalte anzuzeigen.
Einführung in das Markup für strukturierte Daten in der Google Suche
Details zu den für Plattformen und E-Mail Nachrichten zu verwendende Schemata:
- Meta Tags und Strukturierte Daten
- https://schema.org/
- Einführung in das Markup für strukturierte Daten in der Google Suche auf developers.google.com
Weiterführendes zu Zugänglichkeit und Barrierefreiheit
Richtlinie für barrierefreie Webinhalte (WCAG)
Die Richtlinien für barrierefreie Webinhalte (WCAG) beinhaltet Prinzipien, Richtlinien und Erfolgskriterien um Webinhalte barrierefreier zu gestalten. Die Grundlagen zur Zugänglichkeit sind in der Guideline eingearbeitet. Details finden sich unter Richtlinien für barrierefreie Webinhalte WCAG.
Accessible Rich Internet Application (ARIA)
ARIA-Spezifikationen sind eine definierte Semantik für Barrierefreiheit und wird verwendet, um barrierefreie Webumgebungen zu erstellen. Anleitungen, Muster und funktionale Beispiele finden sich unter https://www.w3.org/WAI/ARIA/apg/.
Detailliertere Informationen für vorliegendes Element:
UX-Writing
Was ist zu texten
- Button-Linktext bzw. Icon-Alternativtext
- sofern Icons im Button angezeigt werden (z.B: Loading Icon) benötigt dies zusätzlich einen Alternativtext
Wie ist zu texten
Es gelten die allgemeinen Regeln zu Text formulieren – interessant, verständlich und vertrauenswürdig schreiben und folgende spezifische Vorgaben:
Linktexte
- Linktext muss dessen Zweck klar beschreiben
- Linktexte müssen auch ohne Kontext verständlich sein (Nutzer lesen oft nur Headlines und Linktexte)
- sollten nur einzeilig sein; Zweizeilige Beschriftungen sind zu vermeiden, drei- oder mehrzeilige Beschriftungen sind nicht zulässig
- klar, eindeutig und einfach formulieren
- nie durchgehend in Großbuchstaben schreiben
- Wenn möglich nur einzelne Worte verwenden
- Begriffe wählen die den Nutzern bekannt oder üblich sind
- muss auch ohne Kontext verständlich sein (z.B. Begriff des übergeordneten Menüpunktes darf nicht nötig für das Verständnis sein)
- Fragen und Sätze vermeiden
- keine generischen Texte, müssen klar verständlich sein und auf den Inhalt der verlinkten Seite/ Dokument hinweisen.
- Don´t: “hier” “mehr”, “klicken Sie hier”, “weitere Infos”, “pdf”,…
- im Idealfall steht das wichtigste Wort im Linktext zu Beginn (Nein: “alle detaillierten Informationen zu unseren Reisen nach Kreta”; Ja: “Kreta bereisen im Detail”)
- Linktexte sollten im Wording ähnlich sein wie die Headline der verlinkten Seite / Inhalte (jeden Zweifel ausräumen dass sich der Nutzer bei den gesuchten Inhalten befindet)
Alt-Texte für funktionale Bilder (Icons, Interaktionselemente…)
- klar, eindeutig, für Nutzer und Suchmaschinen lesbare Benennungen
- kurze Texte die den jeweilige Funktion beschreiben
- Worte sollen nicht mit minus oder Underline getrennt werden
- Maximal 100 Zeichen
Dateinamen
- klar, eindeutig, für Nutzer und Suchmaschinen lesbare Benennungen
- kurze Texte die den jeweiligen Inhalt beschreiben
- keine Leerzeichen
- keine Großbuchstaben
- keine Sonderzeichen
keine Broken Links – Vertrauenswürdigkeit!!!
WCAG Prinzip Bedienbar: Richtlinie 2.4.4.: der Zweck von Links ist über Linktext und Link-Kontext erkennbar
WCAG Prinzip Bedienbar: Richtlinie 2.4.6.: Überschriften und Labels beschreiben Thema oder Zweck
WCAG Prinzip Richtlinie 1.1.1.: alle Nicht-Text-Inhalte brauchen Textalternativen